<template>
	<view class="cantant" :style="{background:!checked?'#FFF':'#00884F'}">
		<view class="banner-view">
			<!-- <image class="logo" mode="widthFix" src="../images/xiaole_logo.png"></image> -->
		</view>
		<view class="right-ruler" >
			<image class="ruler" mode="widthFix" :src="`/tool/static/tool/ruler${checked?'1':''}.png`"></image>
		</view>
	</view>
	<view class="calculate" :style="{height:height+'px',background:!checked?'rgba(83, 255, 83, 0.3)':'rgba(255, 255, 127, 0.2)','border-bottom': `5rpx ${checked?'yellow':'red'} solid`}">
		<image @touchmove="calculate" class="swich" src="/tool/static/tool/start.png"></image>
	</view>
	<view class="nub" :style="{color:checked?'#FFF':'#000'}">
		{{nub}} cm
	</view>
	<!-- 切换样式 -->
	<view class="switch">
		<view class="toggle dog-rollover">
		    <label class="toggle-item" for="doggo"  @tap="checked=!checked"
			:class="[checked?'add':'']"
			:style="{background:!checked?'#2e394d':'rgba(83, 255, 83, 0.4)'}"
			>
		      <view class="dog">
		        <view class="ear"></view>
		        <view class="ear right"></view>
		        <view class="face">
		          <view class="eyes"></view>
		          <view class="mouth"></view>
		        </view>
		      </view>
		    </label>
		  </view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		onUnmounted,
		getCurrentInstance
	} from 'vue'
	const height = ref(192);
	const nub = ref(3.00)
	const ruler = ref(0)
	const checked = ref(false)
	const calculate = (e) => {
		// var t = this;
		console.log(e);
		console.log(e.changedTouches[0].pageY);
		var a = (e.changedTouches[0].pageY / 63.6).toFixed(1);
		height.value =  e.changedTouches[0].pageY,
		nub.value = a > 0 ? a : 0
		
	}
	// 向下取整
	const floor = (e) => Math.floor(e);
	onMounted(() => {


	})
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100vh;
	}

	.cantant {
		background-color: rgb(239, 239, 239);
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: row;
	}

	.right-ruler {
		width: 100px;
		height: 100vh;
		overflow-y: hidden;
		display: block;
	}

	.ruler {
		width: 100px;
		height: 100vh;
		overflow-y: hidden;
		display: block;
	}

	.banner-view {
		width: 550rpx;
		position: relative;
		height: 100vh;
		display: flex;
	}

	.logo {
		width: 400rpx;
		transform: rotate(90deg) translate(0%, -50%);
		position: absolute;
		top: 50%;
		left: 50%;
	}

	.calculate {
		background-color: rgba(83, 255, 83, 0.3);
		
		position: absolute;
		top: 7px;
		left: 0;
		width: 100%;
		height: 200rpx;
	}

	.swich {
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 100rpx;
		height: 100rpx;
		padding: 30rpx 30rpx 0 30rpx;
	}

	.nub {
		transform: rotate(90deg) translate(0%, -50%);
		position: absolute;
		right: 160rpx;
		top: 150rpx;
		letter-spacing: 4rpx;
	}

	.btn-protractor {
		position: absolute;
		left: 30rpx;
		bottom: 30rpx;
		height: 80rpx;
		width: 220rpx;
		transform: rotate(90deg) translate(-50%, 0%);
		line-height: 80rpx;
		background-color: rgb(73, 202, 103);
		color: white;
	}
	.switch{
		  position: absolute;
		    left: 30rpx;
		    bottom: 30rpx;
		    height: 80rpx;
		    transform: rotate(90deg) translate(-50%,0%);
		    line-height: 80rpx;
		    color: white;
		// position: relative;
		.toggle {
			// width: 200rpx;
			// height: 100rpx;
			position: relative;
			display: inline-block;
			label.toggle-item {
				width: 111px;
				// background: #2e394d;
				height: 48px;
				display: inline-block;
				border-radius: 50px;
				position: relative;
				transition: all .3s ease;
				transform-origin: 20% center;
				cursor: pointer;
				&::before {
					display: block;
					width: 40px;
			    height: 40px;
					top: 3px;
					left: 4px;
			    border-radius: 50%;
			    border: 2px solid #88cf8f;
					transition: .3s ease;
				}
			}
		}
	}
	// 狗的样式
	.dog-rollover {
		.add{
			// label {
				.dog {
					left: 68px;
					transform: rotate(360deg);
				}
				.mouth {
					transform: scale(1);
					transition-delay: .7s;
					&:before {
						content: '';
						left: 50%;
						position: absolute;
						width: 8px;
						height: 8px;
						background: #ec788d;
						border-radius: 0 0 50% 50%;
						transform: translate(-4px, 5px);
					}
				}
				.ear.right {
					transform: scaleX(-1) rotate(-35deg);
					transition-delay: .6s;
				}
			// }
		}
		label {
			&:before {
				content: none;
			}
			.dog {
				display: inline-block;
				position: absolute;
				width: 40px;
				height: 40px;
				top: 4px;
				left: 3px;
				transition: .6s ease;
			}
			.eyes {
				position: absolute;
				width: 8px;
				height: 8px;
				background: #222;
				border-radius: 50%;
				transform: translate(8px, 14px);
				box-shadow: 16px 0 0 #222, 22px -4px 0 12px #e4ac04;
			}
			.ear {
				width: 18px;
				height: 20px;
				position: absolute;
				left: -4px;
				bottom: 80%;
				background: #f9bb00;
				margin-bottom: -5px;
				border-radius: 50% 50% 0 0 / 100% 100% 0 0;
				box-shadow: inset 4px 0 0 0px #ffffff, inset -4px 0 0 0px #ffffff;
				transform: rotate(-40deg);
				&.right {
					transform: rotate(60deg) scaleX(-1);
					left: auto;
					transform-origin: center bottom;
					transition: .4s ease-in-out;
					right: 0px;
				}
			}
			.face {
				overflow: hidden;
				border-radius: 50%;
				width: 40px;
				height: 40px;
				position: absolute;
				background: #fff;
				z-index: 8;
			}
			.mouth {
				position: absolute;
				background: #222;
				width: 14px;
				height: 7px;
				left: 50%;
				margin-left: -7px;
				border-radius: 2px 2px 20px 20px;
				bottom: 8px;
				transform: scale(0);
				transition: .1s ease;
				
			}
			&:before {
				border-color: white;
				background: white;
			}
		}
	}
	
	
</style>